require("../css/sports_data.less")
require("../css/common.css")
document.ready(function(){
    //调用登录拦截
    window.$utils.checkLogin()
    let userId=JSON.parse(window.localStorage.getItem("user")).userId
    //点击返回
    let backbox=document.querySelector("#back")
    backbox.addEventListener("click",function(){
        history.back()
    })
    //柱状图

    // 指定图表的配置项和数据
    var option1 = {
        //图表的标题
        title: {
            text: '运动数据'
        },
        //工具提示，pc端通过鼠标移动，移动端需要点击
        tooltip: {},
        //图例 - 可以做一些切换显示
        legend: {
            data:["运动数据"]
        },
        //x轴的分类数据
        xAxis: {
            data: []
        },
        //y轴的分类数据 - 一般是自动分配的
        yAxis: {},
        //核心数据
        series: [{
            name: '运动数据',
            type: 'bar',
            data: []
        }]
    };
    //饼图
    option2 = {
        title: {
            text: '运动的总量',
            //副标题
            subtext: '动态数据',
            left: 'center'
        },
        //工具提示，pc端通过鼠标移动，移动端需要点击
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '50%',
                data: [
                   /*  {value: 1048, name: '搜索引擎'},
                    {value: 735, name: '直接访问'},
                    {value: 580, name: '邮件营销'},
                    {value: 484, name: '联盟广告'},
                    {value: 300, name: '视频广告'} */
                ],
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
   
window.$http.get(`/sport/data/${userId}`,function(res){
    console.log(res);
    //柱状图
    res.data.days.forEach(function(item){
        option1.xAxis.data.push(item.date)
        option1.series[0].data.push(item.dayTimes)
    })
    chartsData("main",option1)
    //饼图
    let sports={
        "骑行":0,
        "跑步":0,
        "训练":0
    }
    res.data.days.forEach(function(item){
        item.exerciseData.forEach(function(val){
            sports[val.type]+=val.time-0
        })
    })
    for(let k in sports){
        option2.series[0].data.push({
            value:sports[k],
            name:k
        }
           
        )
    }
    chartsData("pai",option2)
    
})

    function chartsData(str,op){
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById(str));
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(op);
    }
    let topimg=document.querySelector(".img img")
    window.$http.get("/users/accountinfo?userId="+userId,function(res){
        // console.log(res);
        topimg.src=res.data.imgurl
    })
})